<script>
import { useRoute, useRouter } from "vue-router";
import {
  onBeforeUpdate,
  onBeforeMount,
  reactive,
  ref,
  onBeforeUnmount,
} from "vue";
import { Toast } from "vant";
import img from "../assets/img/users.png";
import imgs from "../assets/img/palin.jpg";

import { getBookreadJsonData, getBookreadData } from "../assets/api/details.js";
export default {
  setup() {
    let router = useRouter();
    let back = () => {
      router.go(-1);
    };

    let route = useRoute();

    let obj = reactive({
      commItem: [],
      tagList: [],
      replyList: [],
      userId: null,
      name: "",
      replyText: "",
      gift: [
        {
          img: require("../assets/gift/雪糕.png"),
          foxBean: 100,
          name: "冰淇淋",
        },
        {
          img: require("../assets/gift/甜甜圈.png"),
          foxBean: 500,
          name: "甜甜圈",
        },
        {
          img: require("../assets/gift/巧克力.png"),
          foxBean: 1000,
          name: "巧克力",
        },
        {
          img: require("../assets/gift/荷花.png"),
          foxBean: 5000,
          name: "鲜花",
        },
        {
          img: require("../assets/gift/宝石.png"),
          foxBean: 10000,
          name: "葡萄酒",
        },
        {
          img: require("../assets/gift/雪糕.png"),
          foxBean: 50000,
          name: "钻石",
        },
      ],
      giftIndex: 0,
    });
    let show = ref(false);

    // 过滤器
    let filter = (num) => {
      num = Math.ceil(num / 10000);

      return num > 0 ? num + "万" : num;
    };

    // 挂载前
    onBeforeMount(() => {
      let data = JSON.parse(window.localStorage.getItem("commtent"));
      let id = route.query.id;
      obj.commItem = data.filter((item) => item.BookId == id)[0];
      obj.tagList = obj.commItem.tagList;

      // 记录历史记录
      historyInit();

      // 是否在书架内
      focusInit();

      // 全本初始化
      bookInit();

      // 书本配置读取
      // bookConfigInit();
    });

    // 回复评论
    let commFun = (id) => {
      show.value = true;
      let item = obj.commItem.commentList.filter((item) => item.userId == id);
      obj.replyList = item[0].replyList;
      console.log(obj.replyList);
    };

    // 时间过滤器
    let filters_time = (val) => {
      if (val > 1000000000) {
        let oldTime = parseInt(val);
        let newTime = new Date().getTime();
        let dTime = newTime - oldTime;
        if (dTime / 1000 < 60) return parseInt(dTime / 1000) + "秒前";
        else if (dTime / 1000 / 60 < 60)
          return parseInt(dTime / 1000 / 60) + "分前";
        else if (dTime / 1000 / 60 / 60 < 24)
          return parseInt(dTime / 1000 / 60 / 60) + "小时前";
        else if (dTime / 1000 / 60 / 60 / 24 < 30)
          return parseInt(dTime / 1000 / 60 / 60 / 24) + "天前";
        else if (dTime / 1000 / 60 / 60 / 24 / 30 < 12)
          return parseInt(dTime / 1000 / 60 / 60 / 24 / 30) + "月前";
        else return parseInt(dTime / 1000 / 60 / 60 / 24 / 30 / 12) + "年前";
      }
    };

    let bookShow = ref(false);

    let text = ref("");
    // 写书评
    let review = () => {
      bookShow.value = true;
    };

    let onConfirm = () => {
      console.log(text.value);
      let data = JSON.parse(window.localStorage.getItem("commtent"));
      let id = route.query.id;
      let index = data.findIndex((item) => item.BookId == id);
      // console.log(index);

      // 评论一条
      let Read = JSON.parse(window.localStorage.getItem("Read"));
      if (Read && Read.three == "0/1") {
        Read.three = "1/1";
        window.localStorage.setItem("Read", JSON.stringify(Read));
      }

      let time = new Date().getTime();
      obj.commItem.commentList.unshift({
        select: "",
        userLevel: "2",
        masterLevel: "0",
        userId: "1111",
        nickName: "palin",
        actionId: "0",
        avatar: imgs,
        userAttr: 0,
        comment: text.value,
        commentId: "6374918529544422034",
        time: time,
        grade: 5,
        self: 0,
        toSelf: 0,
        isTop: 0,
        isDeleted: 0,
        likes: 24,
        isPraise: 0,
        replyCount: 0,
        replyList: [],
      });

      data[index] = obj.commItem;
      window.localStorage.setItem("commtent", JSON.stringify(data));
    };

    // 输入框改变
    let changFun = (e) => {
      text.value = e.target.value;
    };

    let replyShow = ref(false);

    // 点击回复
    let replyFun = (index) => {
      obj.replyText = "";
      obj.userId = index;
      obj.name = obj.commItem.commentList[index].nickName;
      replyShow.value = true;
    };

    // 输入框
    let changReplyFun = (e) => {
      obj.replyText = e.target.value;
      console.log(obj.replyText);
    };

    // 确定按钮
    let onConfirmReply = () => {
      let data = JSON.parse(window.localStorage.getItem("commtent"));
      let id = route.query.id;
      let index = data.findIndex((item) => item.BookId == id);
      console.log(index);
      let time = new Date().getTime();
      obj.commItem.commentList[obj.userId].replyList.unshift({
        userId: "1111",
        nickName: "palin",
        actionId: "0",
        avatar: imgs,
        userAttr: 0,
        comment: obj.replyText,
        commentId: "6425565091894409638",
        time: time,
        grade: 0,
        self: 0,
        toSelf: 0,
        isTop: 0,
        isDeleted: 0,
        likes: 0,
        isPraise: 0,
        toNickName: obj.name,
        replyCount: 0,
      });

      data[index] = obj.commItem;
      window.localStorage.setItem("commtent", JSON.stringify(data));
    };

    // 礼物
    let giftImgShow = ref(false);
    let giftImg = ref("");
    //显示pupop吗
    let giftShow = ref(false);

    //点击
    let changeshow = () => {
      giftShow.value = !giftShow.value;
    };
    let giftDialogShow = ref(false);
    let giftFun = (index) => {
      obj.giftIndex = index;
      giftDialogShow.value = true;
      giftShow.value = false;
    };

    // 确认打赏
    let onConfirmGift = () => {
      giftDialogShow.value = false;

      let userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
      if (userinfo && userinfo.foxBean) {
        if (userinfo.foxBean >= obj.gift[obj.giftIndex].foxBean) {
          giftImg.value = obj.gift[obj.giftIndex].img;
          giftImgShow.value = true;
          setTimeout(() => {
            giftImgShow.value = false;
          }, 2000);
          userinfo.foxBean -= obj.gift[obj.giftIndex].foxBean;
          window.localStorage.setItem("userinfo", JSON.stringify(userinfo));
          // 打赏
          let Read = JSON.parse(window.localStorage.getItem("Read"));
          if (Read && Read.five == "0/1") {
            Read.five = "1/1";
            window.localStorage.setItem("Read", JSON.stringify(Read));
          }
        } else {
          Toast("余额不足，请及时充值");
        }
      } else {
        Toast("余额不足，请及时充值");
      }
    };

    // 记录历史记录
    let historyInit = () => {
      let userinfo = JSON.parse(localStorage.getItem("userinfo"));

      // 防止报错
      if (!userinfo) return;

      // 路由取值
      let BookId = route.query.id;

      // 生成对象
      let target = {
        BookId,
        BookName: obj.commItem.BookName,
        BookImage: obj.commItem.BookImage,
        Author: obj.commItem.Author,
        isEnd: BookId % 2 == 0 ? true : false,
        lastTime: new Date().getTime(),
      };

      // 过滤出已有的 防止重复
      userinfo.history = userinfo.history.filter(
        (item) => item.BookId != BookId
      );

      // 头部添加新的数据
      userinfo.history.unshift(target);

      localStorage.setItem("userinfo", JSON.stringify(userinfo));

      // console.log(userinfo, target, obj.commItem);
    };

    // 添加至书架 取消书架
    let toggleBookCseFun = () => {
      console.log("添加至书架 取消书架");

      if (focusFlag.value) {
        // 加入书架
        let Read = JSON.parse(window.localStorage.getItem("Read"));
        if (Read && Read.four == "0/1") {
          Read.four = "1/1";
          window.localStorage.setItem("Read", JSON.stringify(Read));
        }

        let userinfo = JSON.parse(localStorage.getItem("userinfo"));

        // 防止报错
        if (!userinfo) return;
        if (userinfo.usermsg.type == "no") {
          Toast("游客登陆不可加入书架");
          return;
        }

        // console.log(obj);

        let latest = parseInt(Math.random() * 1000) + 1000;
        let readingTitle = `第${0}章`;
        let latestTitle = `第${latest}章`;
        let BookId = obj.commItem.BookId;
        let isEnd = BookId % 2 == 0 ? true : false;
        let recent = userinfo.bookcase.length ? false : true;

        // 生成对象
        let target = {
          reading: 0,
          readingTitle,
          latest,
          latestTitle,
          recent,
          BookId,
          BookName: obj.commItem.BookName,
          BookImage: obj.commItem.BookImage,
          Author: obj.commItem.Author,
          isEnd,
        };

        console.log(target);

        // 过滤出已有的 防止重复
        userinfo.bookcase = userinfo.bookcase.filter(
          (item) => item.BookId != BookId
        );

        // 头部添加新的数据
        userinfo.bookcase.unshift(target);

        // 设置存储
        localStorage.setItem("userinfo", JSON.stringify(userinfo));

        // 关注按钮状态重置
        focusInit();

        // 轻提示
        Toast.success("添加成功");
      } else {
        // 取消书架

        // 本地取数据
        let userinfo = JSON.parse(localStorage.getItem("userinfo"));

        // 书本id
        let BookId = obj.commItem.BookId;

        // 获取下标
        let index = userinfo.bookcase.findIndex((o) => o.BookId == BookId);

        // 防止没找到报错
        if (index == -1) return Toast.fail("取消失败");

        // 剪掉该id的数据
        userinfo.bookcase.splice(index, 1);

        // 判断是否有首位
        if (
          userinfo.bookcase.some((o) => o.recent) &&
          userinfo.bookcase.length != 0
        ) {
          // 数组中第一位直接展示
          userinfo.bookcase[0].recent = true;
        }

        // 本地存数据
        localStorage.setItem("userinfo", JSON.stringify(userinfo));

        // 关注按钮状态重置
        focusInit();

        // 轻提示
        Toast.success("取消成功");
      }
    };

    // 这本书是否在书架 默认不在书架内 显示按钮
    let focusFlag = ref(true);

    // 检测是否在书架
    let focusInit = () => {
      let userinfo = JSON.parse(localStorage.getItem("userinfo"));

      // 防止报错
      if (!userinfo) return;

      // 路由取值
      let BookId = route.query.id;

      // 赋值
      focusFlag.value = !userinfo.bookcase.some(
        (item) => item.BookId == BookId
      );
    };

    // 分享面板配置
    const showShare = ref(false);
    const options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];

    // 读书的方法
    let read = (BookId) => {
      // console.log(BookId);
      router.push("/BookRead/" + BookId);
    };

    // 确认按钮触发
    let downloadConfirmEve = () => {
      console.log(checked.value);
      // 取旧数据
      let DownloadListProxy = JSON.parse(JSON.stringify(downloadList.value));
      // 新数据对旧数据去重
      checked.value.forEach((t) => {
        DownloadListProxy = DownloadListProxy.filter((_t) => _t !== t);
      });
      // 添加数据 旧数据中 添加 新数据
      DownloadListProxy.push(...JSON.parse(JSON.stringify(checked.value)));
      // 合并 payList 和 list 数据
      let PayListProxy = list.value
        .filter((o) => !o.isLock)
        .map((o) => o.title)
        .concat(JSON.parse(JSON.stringify(payList.value)));
      // 去除没支付的
      DownloadListProxy = DownloadListProxy.filter((_t) =>
        PayListProxy.includes(_t)
      );
      // 写入数据
      downloadList.value = DownloadListProxy;
      Toast.success("下载订阅成功");
    };

    // 多选框切花事件
    const checked = ref([]);

    // 多选框原生对象数组
    const toggle = (index) => {
      checkboxRefs.value[index].toggle();
    };

    // 多选框选中了的数组
    const checkboxRefs = ref([]);

    // 弹窗显示状态
    let downloadDialogFlag = ref(false);

    //订阅下载点击方法
    let SubscribeDownloadFun = () => {
      Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "请稍等",
        onOpened: () => {
          if (!list.value.length)
            setTimeout(() => Toast.fail("该书没有更新最新章节"), 500);
          else Toast.clear();
        },
      });
      // 打开弹窗
      downloadDialogFlag.value = true;
    };

    let list = ref([]);

    let bookInit = async () => {
      let data = await getBookreadData().catch(() =>
        console.log("接口调用失败")
      );
      if (!data) data = await getBookreadJsonData();
      console.log(data.bookList);
      let BookId = obj.commItem.BookId;
      let book = data.bookList.find((o) => o.BookId == BookId);
      if (book) {
        console.log(book);
        list.value = book.list;
        // console.log(list.value);
      } else {
        console.log("没有该书本数据");
      }

      bookConfigInit();
    };

    // 书本配置读取
    let bookConfigInit = () => {
      let BookId = obj.commItem.BookId;

      // 本地取数据
      let bookConfig = JSON.parse(localStorage.getItem("bookConfig"));

      // 没有记录直接结束
      if (!bookConfig) return;

      // 获取下标
      let index = bookConfig.findIndex((item) => item.BookId == BookId);

      // 没有这本书记录直接结束
      if (index == -1) return;

      // 得到那本书的数据
      downloadList.value = bookConfig[index].downloadList;
      payList.value = bookConfig[index].payList;

      payList.value.forEach((t) => {
        let index = list.value.findIndex((o) => o.title == t);
        // console.log(index);
        list.value[index].isLock = false;
      });

      // console.log(list.value);

      // 更新这本书的数据
    };

    // 书本配置更新
    let bookConfigUpdate = () => {
      let BookId = obj.commItem.BookId;

      // 本地取数据
      let bookConfig = JSON.parse(localStorage.getItem("bookConfig"));

      // 没有记录 给他赋值
      if (!bookConfig) {
        // 没有数据
        bookConfig = [];
        // 添加多一条数据
        bookConfig.push({
          BookId,
          downloadList: downloadList.value,
          payList: payList.value,
        });
      } else {
        // 有数据
        let index = bookConfig.findIndex((item) => item.BookId == BookId);

        if (index == -1) return;

        // 添加多一条数据
        bookConfig[index].downloadList = downloadList.value;
        bookConfig[index].payList = payList.value;
      }
      // 过滤掉当前书本的数据

      // 更新本地数据
      localStorage.setItem("bookConfig", JSON.stringify(bookConfig));
    };

    let downloadList = ref([]);
    let payList = ref([]);

    // 更新前
    onBeforeUpdate(() => {
      checkboxRefs.value = [];
      // 把所有的选项框选中
      checked.value = downloadList.value;
    });

    onBeforeUnmount(() => {
      bookConfigUpdate();
    });

    return {
      read, // 读书的方法

      // 分享面板
      showShare,
      options,

      focusFlag, // 加入书架按钮显示状态
      toggleBookCseFun, // 添加至书架 取消书架
      back,
      obj,
      filter,
      img, //无头像的使用默认头像
      show, //查看回复评论
      commFun, //点击回复评论
      filters_time, //时间过滤器
      review, //点击写书评
      bookShow, //写书评
      text: "", //评论
      onConfirm, //确认按钮
      changFun,
      replyFun, //回复
      replyShow, //回复输入框
      changReplyFun,
      onConfirmReply,
      changeshow,
      giftShow,
      giftFun,
      giftDialogShow,
      giftImgShow, //礼物
      giftImg, //礼物图片
      onConfirmGift,

      // 下载清单弹窗
      downloadDialogFlag,
      downloadConfirmEve, //确认按钮触发
      checked, // 多选框切花事件
      list, //需要下载的章节数组
      toggle, // 多选框切花事件
      checkboxRefs, // 多选框选中了的数组
      SubscribeDownloadFun, //订阅下载点击方法
    };
  },
};
</script>

<template>
  <!-- 下载弹窗 -->
  <van-dialog
    v-model:show="downloadDialogFlag"
    title="下载清单"
    show-cancel-button
    @confirm="downloadConfirmEve"
    :show-confirm-button="Boolean(list.length)"
  >
    <div class="downloadDialog">
      <van-checkbox-group v-model="checked">
        <van-cell-group inset>
          <van-cell
            v-for="(item, index) in list"
            clickable
            :key="item"
            :title="item.title"
            @click="toggle(index)"
          >
            <template #right-icon>
              <span
                :class="['iconfont', 'icon-jiesuo', { show: item.isLock }]"
              ></span>
              <van-checkbox
                :disabled="item.isLock"
                :name="item.title"
                :ref="(el) => (checkboxRefs[index] = el)"
                @click.stop
                :v-model="true"
              />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>

    <div class="emtpy" v-show="!list.length">
      <p>从您阅读位置往下</p>
      <p><small>暂无最新内容</small> 或 <small>暂无已解锁章节</small></p>
    </div>
  </van-dialog>
  <van-share-sheet
    v-model:show="showShare"
    title="立即分享给好友"
    :options="options"
  />
  <div class="details">
    <div class="details_top">
      <div
        class="bg"
        :style="{ background: 'url(' + obj.commItem.BookImage + ') center' }"
      >
        <div class="bg_small"></div>
      </div>
      <div class="tops">
        <span class="iconfont icon-xiangzuo1" @click="back"></span>
        <span class="iconfont icon-zhuanfa_4" @click="showShare = true"></span>
      </div>
      <div class="imgs">
        <img :src="obj.commItem.BookImage" alt="" />
      </div>
      <div class="title">
        <p class="name">{{ obj.commItem.BookName }}</p>
        <p class="autor">{{ obj.commItem.Author }}</p>
        <p class="over">已完结 | 签约 | VIP | 现代历史</p>
        <div class="num">
          <p>{{ filter(obj.commItem.wordsTotal) }} <span>万字 | </span></p>
          <p>{{ obj.commItem.sentiment }} <span>人看过</span></p>
        </div>
        <div class="biao" v-if="obj.tagList.length < 3">
          <span v-for="(item, index) in obj.tagList" :key="index">{{
            item
          }}</span>
        </div>
        <div class="biao" v-if="obj.tagList.length >= 3">
          <span
            v-for="(item, index) in obj.tagList.splice(0, 3)"
            :key="index"
            >{{ item }}</span
          >
          <span v-for="index in 3" :key="index">{{ obj.tagList[index] }}</span>
        </div>
      </div>
      <div :class="['add', { unadd: !focusFlag }]" @click="toggleBookCseFun">
        <span class="iconfont icon-jia"></span>
        <p>{{ focusFlag ? "加入书架" : "取消书架" }}</p>
      </div>
      <div class="content">
        <div class="bottom_title">
          <span>“</span>
          <p>{{ obj.commItem.Description }}</p>
        </div>
        <div class="catalogue">
          <div class="p1">
            <p>目录</p>
            <p>6小时前更新：第九章 离去和归来</p>
          </div>
          <div class="right">
            <p>04-06 13:02</p>
            <span class="iconfont icon-xiangyou1"></span>
          </div>
        </div>
      </div>
    </div>
    <div
      style="height: 10px; background: #f7f7f9; width: 100%; margin-top: 10px"
    ></div>
    <div class="tabs">
      <div class="tabs_item">
        <div class="img">
          <img src="../assets/img/tou01.png" alt="" />
        </div>
        <div class="text">
          <p class="tou">投推荐票</p>
          <div class="piao">
            <p><span>654</span>票</p>
            <p>第 <span>123</span>位</p>
          </div>
        </div>
      </div>
      <div class="tabs_item" @click="changeshow">
        <div class="img">
          <img src="../assets/img/tou02.png" alt="" />
        </div>
        <div class="text">
          <p class="tou">打赏礼物</p>
          <div class="piao">
            <p>本周<span>5</span>人打赏</p>
          </div>
        </div>
      </div>
      <div class="tabs_item">
        <div class="img">
          <img src="../assets/img/tou03.png" alt="" />
        </div>
        <div class="text">
          <p class="tou">粉丝榜</p>
          <div class="piao">
            <p><span>5</span>粉丝</p>
          </div>
        </div>
      </div>
    </div>
    <div
      style="height: 10px; background: #f7f7f9; width: 100%; margin-top: 0px"
    ></div>
    <div class="book">
      <div class="welfare_top">
        <p class="we">
          书评区 <span>{{ obj.commItem.commentList.length }}条书评</span>
        </p>
        <div class="move" @click="review">
          <div class="ro"><span class="iconfont icon-bianji2"></span></div>
          写书评<span class="iconfont icon-xiangyou1"></span>
        </div>
        <span class="i"></span>
      </div>
      <div class="book_box">
        <div
          class="book_item"
          v-for="(item, index) in obj.commItem.commentList"
          :key="index"
          @click="replyFun(index)"
        >
          <div class="book_top">
            <div class="img">
              <img :src="item.avatar || img" alt="" />
            </div>
            <div class="title">
              <p class="name">{{ item.nickName }}</p>
              <p class="time">{{ filters_time(item.time) }}</p>
            </div>
            <div class="right" @click.stop="commFun(item.userId)">
              <span class="iconfont icon-pinglun1"></span>
              <span>{{ item.replyList.length }}</span>
            </div>
          </div>
          <div class="content">
            <p>{{ item.comment }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <p class="free_du" @click="read(obj.commItem.BookId)">立即阅读</p>
      <p class="login" @click="SubscribeDownloadFun">订阅下载</p>
    </div>

    <!-- 发表评论 -->
    <van-dialog v-model:show="bookShow" @confirm="onConfirm" show-cancel-button>
      <div class="inp">
        <input
          type="text"
          @change="changFun"
          placeholder="请输入您的评论...."
        />
      </div>
    </van-dialog>

    <!-- 回复评论 -->
    <van-dialog
      v-model:show="replyShow"
      @confirm="onConfirmReply"
      show-cancel-button
    >
      <div class="inp">
        <input
          type="text"
          @change="changReplyFun"
          :placeholder="'回复@' + obj.name"
        />
      </div>
    </van-dialog>

    <van-popup
      v-model:show="show"
      round
      position="bottom"
      :style="{ height: '60%' }"
    >
      <div class="book_box" v-if="obj.replyList">
        <div
          class="book_item"
          v-for="(item, index) in obj.replyList"
          :key="index"
        >
          <div class="book_top">
            <div class="img">
              <img :src="item.avatar || img" alt="" />
            </div>
            <div class="title">
              <p class="name">{{ item.nickName }}</p>
              <p class="time">{{ filters_time(item.time) }}</p>
            </div>
          </div>
          <div class="content">
            <p>{{ item.comment }}</p>
          </div>
        </div>
      </div>

      <van-empty
        v-if="!obj.replyList || obj.replyList.length == 0"
        description="暂无回复评论"
      />
    </van-popup>

    <van-popup
      v-model:show="giftShow"
      round
      position="bottom"
      :style="{ height: '60%' }"
      class="radios"
    >
      <div class="senfgift">
        <van-tabs>
          <van-tab title="打赏礼物" class="right">
            <div
              class="item"
              v-for="(item, index) in obj.gift"
              :key="index"
              @click="giftFun(index)"
            >
              <div class="outside">
                <div class="imgs"><img :src="item.img" alt="" /></div>
              </div>
              <div class="font">
                <div class="wenzi">
                  <div class="up">{{ item.foxBean }}有狐币</div>
                  <div class="down">{{ item.name }}</div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </van-popup>

    <van-dialog
      v-model:show="giftDialogShow"
      title="确认打赏"
      @confirm="onConfirmGift"
      show-cancel-button
    >
    </van-dialog>

    <div class="giftImg" v-show="giftImgShow">
      <img :src="giftImg" alt="" />
    </div>
  </div>
</template>


<style lang="scss" scoped>
.radios {
  padding: 20px;
  box-sizing: border-box;
  .senfgift {
    width: 100%;
    background-color: rgba($color: #ffffff, $alpha: 1);
    z-index: 999;
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 390px;
    .right {
      width: 100%;
      height: 350px;
      padding: 10px 20px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 108px;
        height: 145px;
        border-radius: 5px;
        margin-right: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: #f7f7f9;
        .outside {
          width: 100%;
          height: 88px;
          display: flex;
          align-items: center;
          justify-content: center;
          .imgs {
            width: 75px;
            height: 75px;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
        }
        .font {
          width: 100%;
          height: 57px;
          display: flex;
          align-items: center;
          justify-content: center;
          .wenzi {
            width: 75px;
            height: 57px;
            font-size: 12px;
            .up {
              margin-top: 6px;
              height: 22px;
              width: 100%;
              line-height: 22px;
              text-align: center;
              color: #fb3664;
            }
            .down {
              width: 100%;
              height: 18px;
              text-align: center;
              line-height: 18px;
              color: #adabbb;
            }
          }
        }
      }
      .item:nth-child(3n) {
        margin-right: 0px;
      }
    }
  }
}

.details {
  min-height: 100%;
  min-width: 375px;
  max-width: 750px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 65px;
  .details_top {
    height: 400px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    .content {
      position: absolute;
      top: 235px;
      width: 100%;
      height: 180px;
      background-color: #fff;
      .bottom_title {
        padding: 22px 20px;
        margin-top: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        span {
          color: #ececec;
          font-size: 50px;
          margin-top: -20px;
          margin-right: 4px;
        }
        p {
          color: #b6b6bf;
          font-size: 12px;
          height: 100%;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 20px;
        }
      }
      .catalogue {
        display: flex;
        height: 50px;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
        justify-content: space-between;
        box-shadow: 2px -1px 8px 0px #f7f7f7;
        .p1 {
          display: flex;
          align-items: center;
          p {
            &:nth-child(1) {
              font-size: 16px;
              color: #2e2c43;
              margin-right: 10px;
            }
            &:nth-child(2) {
              font-size: 12px;
              color: #767480;
            }
          }
        }
        .right {
          display: flex;
          align-items: center;
          p,
          span {
            font-size: 12px;
            color: #6b6977;
          }
          span {
            color: #c1bfcf;
            margin-left: 3px;
          }
        }
      }
    }
    .bg {
      background-size: 100%;
      filter: blur(7px);
      height: 100%;
      width: 100%;
      box-shadow: inset 0px 0px 0px 7px #000;
      .bg_small {
        height: 119px;
        width: 100%;
        background-image: linear-gradient(
          to bottom,
          #000 34%,
          transparent 123%
        );
      }
    }
    .tops {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 56px;
      align-items: center;
      box-sizing: border-box;
      span {
        font-size: 22px;
        color: #fff;
      }
    }
    .imgs {
      width: 126px;
      position: absolute;
      top: 92px;
      left: 20px;
      z-index: 99;
      box-shadow: 0px 0px 5px 0px #696565;
    }
    .title {
      position: absolute;
      top: 90px;
      left: 170px;
      .name {
        font-size: 18px;
        font-weight: bold;
        color: #fff;
      }
      .autor {
        font-size: 12px;
        color: #fff;
        opacity: 0.8;
        margin-top: 5px;
        margin-bottom: 8px;
      }
      .over {
        font-size: 12px;
        color: #fff;
        opacity: 0.8;
      }
      .num {
        font-size: 12px;
        display: flex;
        margin-top: 10px;
        p {
          color: #e5db3a;
          margin-right: 3px;
        }
        span {
          opacity: 0.8;
          color: #fff;
        }
      }
      .biao {
        display: flex;
        margin-top: 8px;
        span {
          margin-right: 6px;
          padding: 0 5px;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: #fff;
          background-color: rgba(0, 0, 0, 0.5);
          opacity: 0.8;
          border-radius: 3px;
        }
      }
    }
    .add {
      position: absolute;
      right: 20px;
      top: 216px;
      display: flex;
      height: 42px;
      background-color: #fff;
      align-items: center;
      padding: 0 12px;
      border-radius: 42px;
      z-index: 99;
      box-shadow: 2px 2px 8px 0px #f2e3e4;
      &.unadd {
        background-color: #eee;
        padding: 0 16px;
        box-shadow: 2px 2px 8px 0px #bab5b6;
        p {
          color: rgba(0, 0, 0, 0.387);
        }
        .iconfont {
          display: none;
        }
      }
      .icon-jia {
        color: #ff2959;
        font-size: 18px;
        margin-right: 3px;
      }
      p {
        color: #ff2959;
        font-size: 13px;
        font-weight: bold;
      }
    }
  }
  .tabs {
    padding: 0 30px;
    width: 100%;
    box-sizing: border-box;
    height: 144px;
    display: flex;
    justify-content: space-between;
    .tabs_item {
      width: 80px;
      height: 142px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      .img {
        width: 74px;
        height: 58px;
      }
      .text {
        display: flex;
        flex-direction: column;
        align-items: center;
        .piao {
          display: flex;
          align-items: center;
          p {
            font-size: 12px;
            display: flex;
            align-items: center;
            color: #97969e;
            margin-right: 4px;
            span {
              color: #ab9263;
              font-size: 12px;
            }
          }
        }
        .tou {
          font-size: 13px;
          color: #2f2d45;
          font-weight: bold;
        }
      }
    }
  }
  .book {
    padding: 0 20px;
    margin-top: 20px;
    position: relative;
    .welfare_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .we {
        font-size: 18px;
        color: #28282e;
        font-weight: bold;
        display: flex;
        align-items: flex-end;
        span {
          color: #807f89;
          font-size: 10px;
          margin-left: 4px;
          transform: scale(0.93);
        }
      }
      .move {
        font-size: 12px;
        display: flex;
        color: #9ea0ad;
        align-items: center;
        .icon-xiangyou1 {
          font-size: 10px;
          margin-top: 2px;
        }
        .ro {
          transform: rotateY(180deg);
          width: 20px;
          margin-right: 4px;
        }
        .icon-bianji2 {
          width: max-content;
        }
      }
      .i {
        position: absolute;
        left: 0;
        top: 5px;
        width: 4px;
        height: 18px;
        background-color: #f1325e;
      }
    }

    .book_box {
      .book_item {
        border-bottom: 1px solid #f9f9f9;
        padding: 20px 0;
        height: max-content;
        position: relative;
        .book_top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            overflow: hidden;
          }
          .title {
            display: flex;
            flex-direction: column;
            height: 32px;
            position: absolute;
            left: 51px;
            justify-content: space-between;
            .name {
              font-size: 14px;
              font-weight: bold;
              color: #2f2c44;
            }
            .time {
              font-size: 12px;
              color: #919096;
            }
          }
          .right {
            font-size: 12px;
            color: #9e7b42;
            display: flex;
            align-items: center;
            .icon-pinglun1 {
              margin-right: 4px;
            }
          }
        }
        .content {
          margin-top: 10px;
          margin-left: 51px;
          p {
            color: #87868b;
            font-size: 12px;
            line-height: 24px;
          }
        }
      }
    }
  }

  .footer {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 2px -1px 6px 0px #e9ebf0;
    .free_du {
      width: 148px;
      text-align: center;
      color: #343242;
      font-size: 16px;
    }
    .login {
      width: 148px;
      color: #fff;
      height: 44px;
      line-height: 44px;
      background-image: linear-gradient(to right, #fb707d, #fc4f7d);
      border: 1px solid #f4285d;
      border-radius: 44px;
      text-align: center;
    }
  }
  .inp {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    width: 100%;
    margin-top: 10px;
    input {
      height: 50px;
      border: none;
    }
  }
  .giftImg {
    position: fixed;
    /* 动画  名称 运动时间 循环*/
    animation: box 2s infinite;
  }
  /* 动画关键帧 */
  @keyframes box {
    0% {
      transform: rotate(0deg);
      width: 0;
      top: 50%;
      left: 50%;
      opacity: 0;
    }
    25% {
      transform: rotate(-45deg);
      opacity: 1;
    }
    50% {
      transform: rotate(45deg);
      opacity: 1;
    }
    75% {
      transform: rotate(-45deg);
      opacity: 0.8;
    }
    100% {
      transform: rotate(45deg);
      width: 165px;
      top: 45%;
      left: 28%;
      opacity: 0.2;
    }
  }
}

::v-deep .van-popup {
  padding: 0 13px;
  box-sizing: border-box;
  .book_box {
    .book_item {
      border-bottom: 1px solid #f9f9f9;
      padding: 20px 0;
      height: max-content;
      .book_top {
        display: flex;
        align-items: center;
        .img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          overflow: hidden;
        }
        .title {
          margin-left: 19px;
          display: flex;
          flex-direction: column;
          height: 32px;
          justify-content: space-between;
          .name {
            font-size: 14px;
            font-weight: bold;
            color: #2f2c44;
          }
          .time {
            font-size: 12px;
            color: #919096;
          }
        }
        .right {
          font-size: 12px;
          color: #9e7b42;
          display: flex;
          align-items: center;
          .icon-pinglun1 {
            margin-right: 4px;
          }
        }
      }
      .content {
        margin-top: 8px;
        margin-left: 52px;
        p {
          color: #87868b;
          font-size: 12px;
          line-height: 24px;
        }
      }
    }
  }
}

.emtpy {
  text-align: center;
  color: #666;
  font-size: 14px;
  padding: 8px 24px 26px;
  p {
    line-height: 22px;
    small {
      text-decoration: underline;
    }
  }
}

.downloadDialog {
  max-height: calc(44px * 5) !important;
  overflow-y: scroll;
  overflow-x: hidden;
  ::v-deep .van-cell__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .icon-jiesuo {
    margin: 0 5px;
    font-size: 20px;
    font-weight: bold;
    opacity: 0;
    &.show {
      opacity: 1;
    }
  }
}
</style>